<template>
  <div class="pl-3">
    <h2 class="font-semibold mb-3">
      {{ $t('pageFirmware.sectionTitleVersionList') }}
    </h2>
    <el-table
      class="table-responsive table"
      header-row-class-name="thead-light"
      :data="versionList"
      stripe
    >
      <el-table-column :label="$t('pageFirmware.table.name')" prop="name">
      </el-table-column>
      <el-table-column
        :label="$t('pageFirmware.table.currentVersion')"
        prop="version"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { useFirmwareStore } from '@/store/Settings/FirmwareStore';

const firmwareStore = useFirmwareStore();
const bmcVersion = computed(() => {
  return firmwareStore.activeBmcFirmware
    ? firmwareStore.bmcActiveFirmwareId
    : '--';
});
const hostVersion = computed(() => {
  return firmwareStore.activeHostFirmware
    ? firmwareStore.hostActiveFirmwareId
    : '--';
});
const cpldVersion = computed(() => {
  return firmwareStore.activeCpldFirmware
    ? firmwareStore.cpldActiveFirmwareId
    : '--';
});
const pbfVersion = computed(() => {
  return firmwareStore.activeHostPbfFirmware
    ? firmwareStore.hostPbfActiveFirmwareId
    : '--';
});
const versionList = computed(() => {
  return [
    {
      name: 'BMC',
      version: bmcVersion.value,
    },
    {
      name: 'BIOS',
      version: hostVersion.value,
    },
    {
      name: 'Host PBF',
      version: pbfVersion.value,
    },
    {
      name: 'CPLD',
      version: cpldVersion.value,
    },
  ];
});
</script>
